<template>
  <div id="app">
      <el-card shadow="always">
        <el-table
                :data="studentList"
                style="width: 100%">
          <el-table-column
                  label="学生学号"
                  align="center"
                  prop="sid"/>
          <el-table-column
                  label="学生姓名"
                  align="center"
                  prop="sname"/>

          <el-table-column
                  label="学生性别"
                  align="center"
                  prop="sex"/>
          <el-table-column
                  label="学生年龄"
                  align="center"
                  prop="age"/>
          <el-table-column
                  label="家庭住址"
                  align="center"
                  prop="addr"/>
          <el-table-column
                  label="所学科目"
                  align="center"
                  prop="cid"/>
          <el-table-column
                  align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  </div>
</template>

<script>
  import studentApi from "@/api/student"
  export default {
    data() {
      return {
        studentList: [],
        search: ''
      }
    },
    created(){
      this.findAllStudent()
    },
    methods: {
      async findAllStudent(){
        const{data:res}=await studentApi.findAllStudent()

        if(res.code==200){
          this.studentList=res.data.students
        }
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>

<style>
#app{
  diaplay:flex;
  justify-content: center;
}
.el-card{
    margin-left: 40px;
    margin-right: 40px;
  }

</style>
